<template>
  <!-- 头部标题 -->
  <div class="nav-menu">
    <div class="logo-area">
      <img src="~@/assets/img/logo.svg" alt="" />
      <b v-if="!isCollapse">vue3+ts</b>
    </div>
  </div>
  <!-- 整个menu开始 -->
  <div class="menu-aside">
    <el-menu
      background-color="#0c2135"
      text-color="#b7bdc3"
      active-text-color="#fff"
      :collapse="isCollapse"
      :default-active="currentMenuItemId"
    >
      <!-- 开始遍历 -->
      <template v-for="item in userMenu" :key="item.id">
        <!-- 一级目录(可以继续展开) -->
        <template v-if="item.type === 1">
          <el-sub-menu :index="item.id + ''">
            <!-- 每个一级目录的icon与名字 -->
            <template #title>
              <i :class="item.icon"></i>
              <span>{{ item.name }}</span>
            </template>
            <!-- 二级目录开始 -->
            <template v-for="item2 in item.children" :key="item2.id">
              <template v-if="item2.type === 1">
                <el-sub-menu :index="item2.id + ''">
                  <template #title>
                    <i :class="item2.icon"></i>
                    <span>{{ item2.name }}</span>
                  </template>
                </el-sub-menu>
              </template>
              <template v-else-if="item2.type === 2">
                <el-menu-item
                  :index="item2.id + ''"
                  class="el-menu-item-CSM"
                  @click="handleMenuItemClick(item2)"
                >
                  <i :class="item2.icon"></i>
                  <span>{{ item2.name }}</span>
                </el-menu-item>
              </template>
            </template>
            <!-- 二级目录结束 -->
          </el-sub-menu>
        </template>
        <!-- 与一级目录同级的item -->
        <template v-else-if="item.type === 2">
          <el-menu-item :index="item.id + ''">
            <i :class="item.icon"></i>
            <span>{{ item.name }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import { useStore } from '@/store/index';
import { useRouter, useRoute } from 'vue-router';
import localCache from '@/utils/cache';
import { pathMapUserMenu } from '@/utils/mapMenus';

export default defineComponent({
  props: {
    isCollapse: {
      type: Boolean,
      default: false
    }
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const store = useStore();
    const userMenu = store.state.loginModule.userMenu; // 从vuex拿到一个数组, 左边menu需要展示的数据
    const menuDefaultActive = ref('');

    onMounted(() => {
      // 每次挂载都从localStorage里面取出离开之前所在的menu.id
      // 每次重新进入这个网站,自动在第一页id39,在main.vue onUnmounted时将这个值置为39即可(fail)
      // 如果没取到就设置就默认跳到第一页
      menuDefaultActive.value =
        localCache.getCache('menuDefaultActive') ?? '39';
    });

    const handleMenuItemClick = (item: any) => {
      // 点击menuItem跳转路由
      router.push({
        path: item.url ?? '/not-found'
      });
      // 在子菜单切换再刷新记住自己刚才的位置. onUpdated是储存在localStorage, onMounted时取出.
      menuDefaultActive.value = item.id + '';
      localCache.setCache('menuDefaultActive', menuDefaultActive.value);
    };

    // 在子菜单切换再刷新记住自己刚才的位置 2 coderWhy
    // 拿到当前路径,再去菜单里面找这个url的对应的子菜单, 子菜单里面有这个url的id,将id给default-active.
    const currentPath = route.path;
    // 根据路径匹配到的menu, menu里面id, 可以作为 el-menu :default-active
    const currentMenuItemId = pathMapUserMenu(userMenu, currentPath).id + '';

    return {
      userMenu,
      handleMenuItemClick,
      menuDefaultActive,
      currentMenuItemId
    };
  }
});
</script>

<style scoped lang="less">
.nav-menu {
  .logo-area {
    height: 38px;
    text-align: center;
    line-height: 38px;
    color: #fff;
    img {
      height: 60%;
      margin-top: 5px;
      vertical-align: text-bottom;
    }
    b {
      font-size: 24px;
      margin-left: 25px;
    }
  }
  .menu-aside {
    width: 100%;
  }
}
.el-menu-item-CSM {
  background-color: #1d3046;
}
.is-active {
  background-color: #526fff;
}
// 去除折叠的时候的白线
.el-menu {
  border-right: none;
  transition: all 0.2;
}

/* 遍历menu逻辑
菜单有sub-menu, menu-item-group(菜单描述), menu-item,
  直接遍历最大的数组,再判断数组里面根据type判断有什么标题
 */
</style>
